<template>
  <div>
    <div class="item">{{title}}</div>
    <a-row class="slider">
      <a-col>
        <a-input-number
            v-model:value="inputValue" class="input-num"
            controls="false" :min="min" :max="max"
            style="margin-left: 9px;margin-right: 13px"
        />
      </a-col>
      <a-col :xs="15" :sm="20" :md="17">
        <a-slider v-model:value="inputValue" :min="min" :max="max" />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';

export default {
  props: {
    title:String,
    min: Number,
    max: Number,
  },
  setup(props:any) {
    const inputValue = ref<number>(0);
    // console.log(props.min,props.max)
    return {
      inputValue,
    };
  },
};
</script>
<style scoped lang="scss">

.slider-container {
  width: 269px;
}

.slider {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
}

.item {
  float: left;
  margin-top: 7px;
}

.input-num {
  width: 49px;
  border-radius: 10%;
}

/* 去掉箭头 */
:global(.ant-input-number-handler-wrap) {
  display: none
}

:global(.ant-input-number-input) {
  padding: 0 6px;
}


:global(.ant-col-2) {
  flex: unset;
  margin-right: 20px;
}

.code-box-demo .ant-slider {
  margin-bottom: 16px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number']{
  -moz-appearance: textfield;
}



</style>

